<template>
	<section>
		<main>
			<mt-header fixed title="新闻资讯">
				<mt-button slot="left" icon="back" @click="goBack"></mt-button>
			</mt-header>

			<h5 class="bar flex lh40 fs16 fontc1 bgwhite">
				<span class="flex1" :class="{select:tab===1}" @click="tab=1">
					<i>资讯直播</i>
				</span>
				<span class="flex1" :class="{select:tab===2}" @click="tab=2">
					<i>行情分析</i>
				</span>
				<span class="flex1" :class="{select:tab===3}" @click="tab=3">
					<i>行业资讯</i>
				</span>
			</h5>

			<section class="content tl fs16">
				<ul class="live ml10" v-show="tab===1">
					<li v-for="(item,idx) in live" :key="idx">
						<h6 class="lh40">
							<i>
								<b></b>
							</i>
							<em></em>
							<span>{{item.time}}</span>
						</h6>
						<p class="pl20 pr10" :class="{red:item.some==='0'}" v-html="item.text"></p>
					</li>
				</ul>
				<div class="analyze" v-show="tab===2">
					<ul
						class="ml10 mr10"
						v-infinite-scroll="getAnalyze"
						:infinite-scroll-disabled="analyzeLoading"
						infinite-scroll-distance="10"
					>
						<li class="mt15 bgwhite br4" v-for="(item,idx) in analyze" :key="idx">
							<p class="time lh20 fs12 tc">{{item.createTime}}</p>
							<h6 class="lh35 fs16 fontc1">{{item.title}}</h6>
							<div class="pr" :class="item.active?'nofold':'fold'" @click="item.active=!item.active">
								<p class="fs14 text" v-html="item.content.replace(/\s/g,'')"></p>
								<span class="blue fs14 fr">{{item.active?'收起':'展开'}}</span>
							</div>
						</li>
					</ul>
					<div>
						<div slot="bottom" class="mint-loadmore-bottom">
							<span class="tc lh50" v-show="analyzeLoading">加载中···</span>
						</div>
						<div slot="bottom" class="mint-loadmore-bottom">
							<span class="tc lh50" v-show="analyzeDone">- 已经全部加载完了 -</span>
						</div>
					</div>
				</div>

				<div class="trade" v-show="tab===3">
					<ul
						class="ml10 mr10"
						v-infinite-scroll="getTrade"
						:infinite-scroll-disabled="tradeLoading"
						infinite-scroll-distance="10"
					>
						<li
							class="mt15 bgwhite br4 shoadow"
							v-for="(item,idx) in trade"
							:key="idx"
							@click.stop="showContent(item)"
						>
							<p class="lh25 fontc3 fs12 tc">{{item.createTime}}</p>
							<p class="lh25 fs14" v-html="item.title"></p>
						</li>
					</ul>
					<div>
						<div slot="bottom" class="mint-loadmore-bottom">
							<span v-show="tradeLoading">加载中···</span>
						</div>
						<div slot="bottom" class="mint-loadmore-bottom">
							<span v-show="tradeDone">- 已经全部加载完了 -</span>
						</div>
					</div>
				</div>
			</section>
			<transition name="slide-fade1">
				<section class="detail bgwhite" v-show="showDetail">
					<mt-header fixed title="详情">
						<mt-button slot="left" icon="back" @click="showDetail=!showDetail"></mt-button>
					</mt-header>
					<div class="mt50 tl fs14 ml10 mr10" v-html="curDetail"></div>
				</section>
			</transition>
		</main>
	</section>
</template>
<script>
export default {
	name: 'Info',
	data() {
		return {
			tab: 1,

			live: [],
			analyze: [],
			trade: [],

			analyzeStatus: '',

			analyzeLoading: false,
			analyzeDone: false,
			analyzePage: 0,
			analyzePagesize: 10,

			tradeLoading: false,
			tradeDone: false,
			tradePage: 0,
			tradePagesize: 10,

			isLoadAll: false,

			showDetail: false,
			curDetail: ''
		}
	},
	mounted() {
		this.getLive()
	},
	beforeDestroy() {
		this.liveTimer && clearTimeout(this.liveTimer)
	},
	methods: {
		loadBottom() {
			if (!this.isLoadAll) {
				this.$refs.loadmore.onBottomLoaded() //通知loadmore组件从新渲染，计算
				this.currentPage++
				//网络请求加载数据  省略
			} else {
				console.log('已加载全部')
			}
		},

		getLive() {
			axios({
				methods: 'get',
				url: '/user/news/findNewsByUrl.do?url=http%3A%2F%2Fm.jin10.com%2Fflash%3FmaxId%3D0',
				params: {}
			})
				.then(res => {
					res = res.data
					if (res.code === 200) {
						res = JSON.parse(res.data)
						res.forEach((item, idx) => {
							item = item.split('#')
							res[idx] = {
								type: item[0],
								some: item[1],
								time: item[2],
								text: item[3]
							}
						})
						this.live = res
					}
				})
				.then(() => {
					this.liveTimer = setTimeout(() => {
						this.getLive()
					}, 10000)
				})
				.catch(() => {
					Toast('网络出错')
				})
		},
		getAnalyze() {
			if (this.analyzeLoading) return
			if (this.analyzeDone) return
			if (this.tab !== 2 && this.analyze.length > 0) return
			this.analyzeLoading = true
			axios({
				methods: 'get',
				url: '/user/news/findNewsList.do',
				params: {
					type: 2,
					offset: this.analyzePagesize * this.analyzePage,
					size: this.analyzePagesize
				}
			})
				.then(res => {
					this.analyzeLoading = false
					res = res.data
					if (res.code === 200) {
						let arr = this.analyze
						res.data.length === 0 && (this.analyzeDone = true)
						res.data.forEach(item => {
							arr.push({ ...item, ...{ active: false } })
						})
						this.analyze = arr
						this.analyzePage += 1
					}
				})
				.catch(() => {
					Toast('网络出错')
				})
		},
		getTrade() {
			if (this.tradeLoading) return
			if (this.tradeDone) return
			if (this.tab !== 3 && this.trade.length > 0) return
			this.tradeLoading = true
			axios({
				methods: 'get',
				url: '/user/news/findNewsList.do',
				params: {
					type: 3,
					offset: this.tradePagesize * this.tradePage,
					size: this.tradePagesize
				}
			}).then(res => {
				this.tradeLoading = false
				res = res.data
				if (res.code === 200) {
					let arr = this.trade
					res.data.length === 0 && (this.tradeDone = true)
					res.data.forEach(item => {
						arr.push(item)
					})
					this.trade = arr
					this.tradePage += 1
				}
			})
		},
		handleTopChange(status) {
			this.topStatus = status
		},
		showContent(item) {
			this.showDetail = true
			this.curDetail = item.content
		},
		goBack() {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
		}
	}
}
</script>
<style scoped>
.content {
	margin-top: 95px;
}
.bar {
	border-top: 1px solid #ddd;
	position: fixed;
	width: 100%;
	height: 40px;
	left: 0;
	top: 39px;
	z-index: 9;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.bar span i {
	line-height: 38px;
	height: 38px;
	display: inline-block;
	border-bottom: 2px solid transparent;
}
.bar .select i {
	color: #f96d46;
	border-color: #f96d46;
}
.live li h6 {
	overflow: hidden;
}
.live li h6 span {
	background-color: #f6dad3;
	color: #f96d46;
	font-size: 12px;
	padding: 2px 5px;
	border-radius: 8px;
}
.live li h6 em {
	width: 17px;
	height: 1px;
	display: inline-block;
	background-color: #f6dad3;
	vertical-align: middle;
}
.live li h6 i {
	width: 10px;
	height: 10px;
	background-color: #f6dad3;
	border-radius: 5px;
	display: inline-block;
	position: relative;
}
.live li h6 i::before {
	content: '';
	width: 1px;
	height: 80px;
	margin-top: -30px;
	margin-left: 5px;
	float: left;
	z-index: -1;
	background-color: #f6dad3;
}
.live h6 i b {
	width: 4px;
	height: 4px;
	background-color: #f96d46;
	border-radius: 2px;
	position: absolute;
	left: 3px;
	top: 3px;
	z-index: 4;
}
.live li p {
	border-left: 1px solid #f6dad3;
	margin-left: 5px;
	line-height: 23px;
}
.live li p img {
	min-width: 100%;
	width: 100%;
	height: auto;
}
.red {
	color: #ff3800;
}

.analyze li,
.trade li {
	padding: 10px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.analyze li p,
.trade li p {
	color: #5f5f5f;
}
.analyze li .time,
.trade li .time {
	color: #646464;
}
.analyze li span {
	margin-top: 10px;
	line-height: 20px;
}
.analyze li span::after {
	content: '';
	width: 0;
	height: 0;
	border: 4px solid transparent;
	float: right;
	margin-left: 4px;
}
.analyze .nofold span::after {
	margin-top: 5px;
	border-bottom-color: #455fba;
}
.analyze .fold span::after {
	margin-top: 8px;
	border-top-color: #455fba;
}
.analyze p {
	line-height: 25px;
}
.analyze .fold p.text {
	overflow: hidden;
	height: 50px;
	position: relative;
}
.analyze .fold p.text::after {
	content: '...';
	position: absolute;
	bottom: 0;
	right: 10px;
	padding-left: 40px;
	background: -webkit-linear-gradient(left, transparent, #fff 55%);
	background: -o-linear-gradient(right, transparent, #fff 55%);
	background: -moz-linear-gradient(right, transparent, #fff 55%);
	background: linear-gradient(to right, transparent, #fff 55%);
}
.detail {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	top: 0;
	left: 0;
	line-height: 22px;
	color: #333;
	z-index: 999;
}

.slide-fade1-enter-active {
	transition: all 0.3s ease;
}
.slide-fade1-leave-active {
	transition: all 0.3s ease;
}
.slide-fade1-enter,
.slide-fade1-leave-to {
	transform: translateX(400px);
}
</style>
